<!-- todo
  1. 各种下拉框
  2. 颜色配置
  3. 组件分离
  4. svg图形（静态，动态：直线、曲线、多边形）
  5. 其他：颜色拾取
-->

<template>
  <div class="appwraper">
    <!-- 文件菜单弹出 -->
    <Dropdown btnId="draw_file" direction="down">
      <div class="dropMenu">
        <div class="btn-row g-btn">
          <Icon class="icon-s" icon="#iconc-dakaiwenjian"></Icon>
          <div class="btn-row-title h6">打开</div>
        </div>
        <div class="btn-row g-btn">
          <Icon class="icon-s" icon="#iconc-pc"></Icon>
          <div class="btn-row-title h6">设为背景</div>
        </div>
        <div @click="exportImg" class="btn-row g-btn">
          <Icon class="icon-s" icon="#iconc-lingcunwei"></Icon>
          <div class="btn-row-title h6">导出图片</div>
        </div>
        <div class="btn-row g-btn">
          <Icon class="icon-s" icon="#iconc-guanyu"></Icon>
          <div class="btn-row-title h6">帮助</div>
        </div>
        <div class="btn-row g-btn">
          <Icon class="icon-s" icon="#iconc-tuichu"></Icon>
          <div class="btn-row-title h6">退出</div>
        </div>
      </div>
    </Dropdown>
    <div class="appView">
      <div style="width: 100%;height: 100%" class="drawbox h7">
        <!-- 菜单 -->
        <header class="appheader h7">
          <!-- 图标 -->
          <div class="header-icon"
               :style="{background: 'url(' + appWindow.option.icon +') no-repeat center center', backgroundSize: 'cover'}"></div>
          <!-- 名称 -->
          <div class="title g-ft--nowrap h7">
            {{appWindow.option.title}}
          </div>
        </header>
        <nav class="menu">
          <span id="draw_file" class="menu-item g-hashouver">文件</span>
          <span @click="activeMenu = 1" :class="activeMenu === 1?'menu-item-active':'g-line--r'"
                class="menu-item">主页</span>
          <span id="test" @click="activeMenu = 2" :class="activeMenu === 2?'menu-item-active':'g-line--r'"
                class="menu-item">查看</span>
          <span @click="activeMenu = 3" :class="activeMenu === 3?'menu-item-active':'g-line--r'"
                class="menu-item">文本</span>
        </nav>
        <section @mousedown.stop="" class="appbody">
          <DrawController :drawerType="drawerType" :option="canvasOption"
                          :canvasController="canvasController"
                          @chooseDrawType="chooseDrawType" @setOption="setOption"
          ></DrawController>
          <div class="drawbody">
            <div class="drawview" :style="drawviewSize"></div>
          </div>
        </section>
      </div>
    </div>
    <div class="childWindow"></div>
  </div>
</template>

<script>
  import Dropdown from '../../../components/dropdown/Dropdown';
  import DrawController from './controller';
  import appMixin from '@/mixin/app_window';
  import {Controller} from '@/assets/plugins/drawer/index';
  import '@/assets/plugins/drawer/css/index.css';

  export default {
    name: "DrawBox",
    inject: ['appWindow'],
    components: {Dropdown, DrawController},
    mixins: [appMixin],
    data() {
      return {
        activeMenu: 1,
        /* 画笔 */
        canvasController: '', // 操作画布
        drawerType: '', // 画笔类型
        /* 画布 */
        scale: 1, // 清晰度 n个像素单位表示一个点
        boxWidth: 400,
        boxHeight: 400,
        pxWidth: 3, // 画笔像素
        foregroundColor: 'black', // 前景色
        backgroundColor: '#fff', // 背景色
      }
    },
    created() {
    },
    mounted() {
      // 初始化画布，默认画笔工具
      this.canvasController = new Controller(Object.assign(
        {selector: `[data-pid="${this.appID}"] .drawview`},
        this.canvasOption
      ), (toolType) => {
        this.drawerType = toolType;
      }, option => {
        console.log(option);
      });
    },
    methods: {
      resizeCanvas({width, height}) {
        this.boxWidth = width;
        this.boxHeight = height;
        this.setOption();
      },
      // 导出图片，默认png
      exportImg() {
        this.canvasController.exportImg();
      },
      // 变更画布配置
      setOption(option = this.canvasOption) {
        console.log('setOption', option);
        this.$nextTick(_ => {
          this.canvasController.setOption(option);
        });
      },
      // 切换工具
      chooseDrawType(drawerType) {
        this.canvasController.chooseTool(drawerType);
      }
    },
    computed: {
      // 画布样式
      drawviewSize() {
        return {
          width: `${this.boxWidth}px`,
          height: `${this.boxHeight}px`,
        }
      },
      // 画布配置
      canvasOption() {
        return {
          scale: this.scale, // 缩放
          pxWidth: this.pxWidth, // 画笔像素
          foregroundColor: this.foregroundColor, // 前景色
          backgroundColor: this.backgroundColor, // 背景色
          boxWidth: this.boxWidth,
          boxHeight: this.boxHeight,
        };
      },
    }
  }
</script>
<style>
  /* 按钮 */
  .btn-column, .select-btn-row {
    display: inline-block;
  }

  .btn-column {
    height: 100%;
    width: 42px;
    padding: 0 3px;

    & .icon {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid rgba(140, 187, 236);
    }

    & img {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid rgba(140, 187, 236);
    }
  }

  .btn-row {
    display: flex;
    align-items: center;
    height: 25px;
    line-height: 20px;
    width: auto;
    padding: 2px;
    text-align: center;

    & img {
      width: 20px;
      height: 100%;
    }

    & .icon {
      width: 20px;
      height: 100%;
    }

    & .btn-row-title {
      margin: 0 5px;
      height: 100%;
      line-height: 20px;
      white-space: nowrap;
    }
  }

  .color-wraper,
  .iconbtn-wraper2,
  .iconbtn-wraper {
    width: 90px;

    & img {
      width: 25px;
      height: 25px;
      padding: 3px;
      vertical-align: middle;
    }
  }

  .iconbtn-wraper2 {
    width: 20px;
    background: #fff;
  }

  .color-wraper {
    width: calc(10 * 18px);
    background: #fff;

    & .color-wraper-item {
      display: inline-block;
      padding-right: 3px;
      vertical-align: middle;
    }
  }

</style>
<style scoped>
  /* 程序布局 */
  .appwraper {
    width: 100%;
    height: 100%;

    & .appView { /*程序部分*/
      width: 100%;
      height: 100%;
      /*overflow: auto;*/
    }

    & .childWindow { /*程序弹窗部分*/
    }
  }

  .drawbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .appbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 0;
  }

  /* 菜单按钮 */
  .menu {
    height: auto;
    background: #fff;

    & .menu-item:nth-child(1), & .menu-item, & .menu-item-active {
      float: left;
      padding: 2px 15px;
      cursor: pointer;
    }

    & .menu-item:nth-child(1) {
      background: #298CE1;
      color: #fff;
    }

    & .menu-item {
      display: inline-block;
      background: #fff;
    }

    & .menu-item-active {
      background: var(--color_gray0);
    }
  }

  .dropMenu {
    & .btn-row {
      padding: 5px;
      width: 160px;
      height: 35px;
      line-height: 35px;
    }

    & .icon-s {
      width: 30px;
      height: 30px;
    }

    & .btn-row-title {
    }
  }


  /* 画布 */
  .drawbody {
    flex: 1;
    width: 100%;
    height: 0;
    background: #DBE4F1;
    padding: 5px;
    overflow: auto;

    & .drawview {
      box-shadow: 5px 5px 3px 0 rgba(180, 192, 209, 0.8);
    }
  }
</style>
